<template>
  <div id="page-screen" class="page-screen h-full flex flex-col overflow-x-auto" style="background-color:#030B20;" :style="{zoom: pageZoomRate}">
    <div class="top-header relative">
      <img class="top-header-image absolute" src="../../assets/screen/title-text@2x1.png" :style="{transform: `scale3d(${scaleRate}, ${scaleRate}, ${scaleRate})`}" />
      <div class="top-header-time text-screen absolute text-sm">{{nowTime}}</div>
      <d2-header-fullscreen class="top-header-fullscreen absolute">
        <span class="pl-2">全屏查看</span>
      </d2-header-fullscreen>
    </div>

    <img class="bottom-footer w-full absolute left-0 bottom-0 right-0" src="../../assets/screen/bg-earth@2x.png" :style="{transform: `scale3d(1, ${scaleRate}, 1)`}" />
    <img class="center-building absolute" src="../../assets/screen/building.png" />

    <div class="flex-1 h-0 p-3">
      <el-row :gutter="20" class="h-full">
        <el-col :span="7" class="relative flex flex-col h-full">
          <div class="common-card">
            <div class="flex items-center">
              <img class="common-card-icon" src="../../assets/screen/icon@2x.png" />
              <span class="common-card-title">年碳排额度</span>
            </div>
            <div class="flex items-center px-6 -mt-4">
              <div class="flex-1" style="color:#58DBFF;">
                <span style="font-size:29px;" class="font-bold">720,000</span>
                <span style="font-size:17px;" class="ml-1">吨</span>
              </div>
              <div style="color:#58DBFF;">
                <div>
                  <span style="font-size:15px" class="text-white">本日碳排</span>
                  <span style="font-size:19px;" class="ml-1 font-bold">12.6</span>
                  <span style="font-size:17px;" class="ml-1">吨</span>
                </div>
                <div>
                  <span style="font-size:15px" class="text-white">本月碳排</span>
                  <span style="font-size:19px;" class="ml-1 font-bold">262.8</span>
                  <span style="font-size:17px;" class="ml-1">吨</span>
                </div>
              </div>
            </div>
            <div class="px-6 mt-2">
              <div class="h-3 rounded-full relative mb-12" style="background-color:#0A4299;">
                <div class="h-3 rounded-full absolute top-0 left-0 bottom-0" style="background-color:#145DCE;width:50%;">
                  <div class="absolute top-3 left-full border-0 border-l border-solid text-sm text-white pl-2 h-6 w-auto whitespace-nowrap flex items-end" style="border-color:#145DCE;">
                    计划使用<span style="color:#58DBFF;">50%</span>
                  </div>
                </div>
                <div class="h-3 rounded-full absolute top-0 left-0 bottom-0" style="background-color:#00AEEF;width:40%;">
                  <div class="absolute top-3 left-full border-0 border-l border-soli text-sm text-white pl-2 h-12 w-auto whitespace-nowrap flex items-end" style="border-color:#00AEEF;">
                    实际使用<span style="color:#58DBFF;">40%</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex px-6 pt-2">
              <div class="flex-1 p-1 text-center transparent-card">
                <div style="color:#58DBFF;">
                  <span style="font-size:21px;" class="font-bold">1,200,00</span>
                  <span style="font-size:17px;" class="ml-1">吨</span>
                </div>
                <div class="text-white text-sm">年总额度</div>
              </div>
              <div class="flex-1 p-1 text-center transparent-card ml-2">
                <div style="color:#58DBFF;">
                  <span style="font-size:21px;" class="font-bold">4,800,00</span>
                  <span style="font-size:17px;" class="ml-1">吨</span>
                </div>
                <div class="text-white text-sm">碳排余额</div>
              </div>
            </div>
          </div>
          <div class="common-card">
            <div class="flex items-center">
              <img class="common-card-icon" src="../../assets/screen/icon@2x(1).png" />
              <span class="common-card-title">碳排结构</span>
            </div>
            <div id="tan_pai_jie_gou_chart" style="height:150px;" class="-mt-4"></div>
          </div>
          <div class="common-card flex-1 h-0 flex">
            <div class="flex-4 flex flex-col">
              <div class="flex items-center">
                <img class="common-card-icon" src="../../assets/screen/icon@2x(2).png" />
                <span class="common-card-title">碳排强度</span>
              </div>
              <div class="flex-1 h-0 pl-8 flex">
                <div class="w-3 h-full rounded-full relative" style="background-color:#2473EF;">
                  <div class="rounded-full absolute right-0 left-0 bottom-0" style="height:70%;border:2px dashed #00AEEF;"></div>
                  <div class="rounded-full absolute right-0 left-0 bottom-0" style="height:40%;background-color:#00AEEF;"></div>
                </div>
                <div class="flex-1 flex flex-col ml-2">
                  <div class="flex-1 h-0">
                    <div style="color:#58DBFF;font-size:18px;" class="font-bold">110 kg/㎡/年</div>
                    <div class="flex items-center">
                      <span class="inline-block w-3 h-3 rounded-full" style="background-color:#2473EF;"></span>
                      <span class="text-sm text-white ml-1">基准年度强度</span>
                    </div>
                  </div>
                  <div class="flex-1 h-0">
                    <div style="color:#58DBFF;font-size:18px;" class="font-bold">97 kg/㎡/年</div>
                    <div class="flex items-center">
                      <span class="inline-block w-3 h-3 rounded-full" style="border:2px dashed #00AEEF"></span>
                      <span class="text-sm text-white ml-1">预测全年强度</span>
                    </div>
                  </div>
                  <div class="flex-1 h-0">
                    <div style="color:#58DBFF;font-size:18px;" class="font-bold">45 kg/㎡/年</div>
                    <div class="flex items-center">
                      <span class="inline-block w-3 h-3 rounded-full" style="background-color:#00AEEF;"></span>
                      <span class="text-sm text-white ml-1">截止今日强度</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="pt-10">
              <img src="../../assets/screen/cutline@2x.png" class="h-full" />
            </div>
            <div class="flex-5 flex flex-col">
              <div class="flex items-center">
                <img class="common-card-icon" src="../../assets/screen/icon@2x(3).png" />
                <span class="common-card-title">节能统计</span>
              </div>
              <div class="flex-1 h-0 px-4 flex flex-col">
                <div class="flex-1 p-1 transparent-card flex items-center">
                  <img src="../../assets/screen/icon@2x(4).png" class="w-11 h-11" />
                  <div class="flex-1">
                    <div style="color:#58DBFF;">
                      <span style="font-size:21px;" class="font-bold">11.29</span>
                      <span style="font-size:17px;" class="ml-1">万度</span>
                    </div>
                    <div class="text-white text-sm">年节电量</div>
                  </div>
                </div>
                <div class="flex-1 p-1 transparent-card flex items-center mt-3">
                  <img src="../../assets/screen/icon@2x(5).png" class="w-11 h-11" />
                  <div class="flex-1">
                    <div style="color:#58DBFF;">
                      <span style="font-size:21px;" class="font-bold">90.32</span>
                      <span style="font-size:17px;" class="ml-1">吨</span>
                    </div>
                    <div class="text-white text-sm">年CO2减排量</div>
                  </div>
                </div>
                <div class="flex-1 p-1 transparent-card flex items-center mt-3">
                  <img src="../../assets/screen/icon@2x(6).png" class="w-11 h-11" />
                  <div class="flex-1">
                    <div style="color:#58DBFF;">
                      <span style="font-size:21px;" class="font-bold">20.5%</span>
                      <span style="font-size:17px;" class="ml-1">万度</span>
                    </div>
                    <div class="text-white text-sm">年化节能率</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="10" class="relative flex flex-col h-full">
          <div class="flex">
            <div class="flex-1 p-2 transparent-card-v2 flex items-center">
              <img src="../../assets/screen/ic@2x.png" class="w-16 h-16" />
              <div class="flex-1 ml-1">
                <div style="color:#58DBFF;">
                  <span style="font-size:21px;" class="font-bold">5,600</span>
                  <span style="font-size:17px;" class="ml-1">吨</span>
                </div>
                <div class="text-white text-sm">生产阶段碳排</div>
              </div>
            </div>
            <div class="flex-1 p-2 transparent-card-v2 flex items-center ml-3">
              <img src="../../assets/screen/ic@2x-1.png" class="w-16 h-16" />
              <div class="flex-1 ml-1">
                <div style="color:#58DBFF;">
                  <span style="font-size:21px;" class="font-bold">4,580</span>
                  <span style="font-size:17px;" class="ml-1">吨</span>
                </div>
                <div class="text-white text-sm">施工阶段碳排</div>
              </div>
            </div>
            <div class="flex-1 p-2 transparent-card-v2 flex items-center ml-3">
              <img src="../../assets/screen/ic@2x-2.png" class="w-16 h-16" />
              <div class="flex-1 ml-1">
                <div style="color:#58DBFF;">
                  <span style="font-size:21px;" class="font-bold">3,960</span>
                  <span style="font-size:17px;" class="ml-1">吨</span>
                </div>
                <div class="text-white text-sm">运行阶段碳排</div>
              </div>
            </div>
          </div>
          <div class="flex-1 h-0"></div>
          <div class="flex pb-4">
            <div class="px-2 flex-1">
              <img src="../../assets/screen/nav01@2x.png" />
              <div class="text-center text-base mt-2" style="color:#45CDFF;">配电管理</div>
            </div>
            <div class="px-2 flex-1">
              <img src="../../assets/screen/nav02@2x.png" />
              <div class="text-center text-base mt-2" style="color:#45CDFF;">环境监测</div>
            </div>
            <div class="px-2 flex-1">
              <img src="../../assets/screen/nav03@2x.png" />
              <div class="text-center text-base mt-2" style="color:#45CDFF;">能耗分析</div>
            </div>
            <div class="px-2 flex-1">
              <img src="../../assets/screen/nav04@2x.png" />
              <div class="text-center text-base mt-2" style="color:#45CDFF;">碳排管理</div>
            </div>
            <div class="px-2 flex-1">
              <img src="../../assets/screen/nav05@2x.png" />
              <div class="text-center text-base mt-2" style="color:#45CDFF;">智能运维</div>
            </div>
          </div>
        </el-col>
        <el-col :span="7" class="relative flex flex-col h-full">
          <div class="common-card" style="padding-bottom:10px;">
            <div class="flex items-center">
              <img class="common-card-icon" src="../../assets/screen/icon@2x(7).png" />
              <span class="common-card-title">设备状态</span>
            </div>
            <div class="flex px-2 -mt-4">
              <div class="flex-1 py-2 text-center transparent-card-v3">
                <div style="color:#58DBFF;font-size:30px;">20/25</div>
                <div class="text-white text-sm">采集网关</div>
              </div>
              <div class="flex-1 py-2 text-center transparent-card-v3 ml-2">
                <div style="color:#58DBFF;font-size:30px;">220/210</div>
                <div class="text-white text-sm">采集终端</div>
              </div>
            </div>
          </div>
          <div class="common-card">
            <div class="flex items-center">
              <img class="common-card-icon" src="../../assets/screen/icon@2x(8).png" />
              <span class="common-card-title">能源消耗</span>
            </div>
            <div class="flex px-6 -mt-4 flex-col">
              <div class="flex-1 px-1 transparent-card-v4 flex items-center">
                <img src="../../assets/screen/icon-tunder.png" class="w-12 h-15 mx-2 my-1" />
                <div class="flex-1 text-sm text-white">
                  <div>总电耗 (万度)</div>
                  <div class="flex">
                    <span class="flex-2">本日</span>
                    <span style="color:#58DBFF;" class="flex-3 font-bold">0.98</span>
                    <span class="flex-2">本月</span>
                    <span style="color:#58DBFF;" class="flex-3 font-bold">21.68</span>
                    <span class="flex-2">本年</span>
                    <span style="color:#58DBFF;" class="flex-3 font-bold">240.60</span>
                  </div>
                </div>
              </div>
              <div class="flex-1 px-1 transparent-card-v4 flex items-center mt-2">
                <img src="../../assets/screen/icon-water.png" class="w-12 h-15 mx-2 my-1" />
                <div class="flex-1 text-sm text-white">
                  <div>总水耗 (万吨)</div>
                  <div class="flex">
                    <span class="flex-2">本日</span>
                    <span style="color:#58DBFF;" class="flex-3 font-bold">1.36</span>
                    <span class="flex-2">本月</span>
                    <span style="color:#58DBFF;" class="flex-3 font-bold">26.50</span>
                    <span class="flex-2">本年</span>
                    <span style="color:#58DBFF;" class="flex-3 font-bold">198.68</span>
                  </div>
                </div>
              </div>
              <div class="flex-1 px-1 transparent-card-v4 flex items-center mt-2">
                <img src="../../assets/screen/icon-fire.png" class="w-12 h-15 mx-2 my-1" />
                <div class="flex-1 text-sm text-white">
                  <div>总气耗 (万立方米)</div>
                  <div class="flex">
                    <span class="flex-2">本日</span>
                    <span style="color:#58DBFF;" class="flex-3 font-bold">0.26</span>
                    <span class="flex-2">本月</span>
                    <span style="color:#58DBFF;" class="flex-3 font-bold">8.24</span>
                    <span class="flex-2">本年</span>
                    <span style="color:#58DBFF;" class="flex-3 font-bold">36.8</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="common-card flex-1 h-0 flex flex-col">
            <div class="flex items-center">
              <img class="common-card-icon" src="../../assets/screen/icon@2x(9).png" />
              <span class="common-card-title">能耗日历</span>
            </div>
            <div class="flex-1 h-0 flex flex-col px-4 -mt-4">
              <div class="w-full grid gap-x-2 gap-y-2 grid-cols-7">
                <div class="transparent-card py-2 text-white text-center text-sm inline-block" v-for="(i, index) in ['一', '二', '三', '四', '五', '六', '日']" :key="index">周{{i}}</div>
              </div>
              <div class="flex-1 h-0 mt-2 w-full grid gap-x-2 gap-y-2 grid-cols-7">
                <div class="transparent-card py-2 text-white text-center text-sm inline-block flex items-center justify-center" v-for="(i, index) in 35" :key="index">
                  <div class="absolute w-8 h-8 rounded-full flex items-center justify-center text-base" style="background-color:#01BB85;" v-if="i >= 4 && i <= 34">{{i - 3}}</div>
                </div>
              </div>
              <div class="mt-4 flex h-1 px-4">
                <div class="flex-1 rounded-full" style="background-color:#01BB85;"></div>
                <div class="flex-1 rounded-full ml-2" style="background-color:#EDE603;"></div>
                <div class="flex-1 rounded-full ml-2" style="background-color:#F0AC03;"></div>
                <div class="flex-1 rounded-full ml-2" style="background-color:#F25B23;"></div>
                <div class="flex-1 rounded-full ml-2" style="background-color:#F10B1D;"></div>
                <div class="flex-1 rounded-full ml-2" style="background-color:#5E1210;"></div>
              </div>
            </div>
            <div class="mt-1 flex text-white text-xs px-6">
              <span>0</span>
              <span class="flex-1"></span>
              <span>0.5</span>
              <span class="flex-1"></span>
              <span>1</span>
              <span class="flex-1"></span>
              <span>1.5</span>
              <span class="flex-1"></span>
              <span>2</span>
              <span class="flex-1"></span>
              <span>2.5</span>
              <span class="flex-1"></span>
              <span>3</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import d2HeaderFullscreen from '../../layout/header-aside/components/header-fullscreen'
  import dayjs from 'dayjs'
  import Charts from '@jiaminghi/charts'
  import dataV from '@jiaminghi/data-view'
  import Vue from 'vue'
  Vue.use(dataV)
  let clockId = null

  export default {
    data() {
      return {
        windowWidth: window.innerWidth,
        scaleRate: 1,
        pageZoomRate: 1,
        nowTime: null,
      }
    },
    components: {
      d2HeaderFullscreen,
    },
    watch: {
      windowWidth: {
        handler(newVal) {
          // console.log(newVal)
          const scaleRate = newVal / 1920
          this.scaleRate = scaleRate > 1 ? 1 : scaleRate
          // 获取本页面的比例
          const pageScreen = document.querySelector('#page-screen')
          const x = pageScreen.offsetWidth / 1400
          const y = pageScreen.offsetHeight / 950
          this.pageZoomRate = Math.min(x, y)
        },
        immediate: true,
      },
    },
    beforeDestroy() {
      clearInterval(clockId)
    },
    created() {
      clockId = setInterval(() => {
        this.nowTime = dayjs().format('YYYY年MM月DD日 HH:mm:ss')
      }, 1000)
      window.onresize = () => {
        this.windowWidth = window.innerWidth
      }
      this.drawPie()
    },
    methods: {
      dayjs,
      drawPie() {
      	const chart2 = new Charts(document.querySelector('#tan_pai_jie_gou_chart'))
      	chart2.setOption({
      		series: [
      			{
      				type: 'pie',
      				roseType: true,
      				data: [
                { name: '电力', value: 15 },
                { name: '生产工艺', value: 20 },
                { name: '燃料', value: 15 },
                { name: '热力', value: 25 },
                { name: '医院', value: 25 }
              ],
      				radius: ['60%', '80%'],
      				insideLabel: {
      					show: false,
      				},
      				outsideLabel: {
      					show: true,
      					labelLineEndLength: 5
      				},
      			}
      		]
      	})
      },
    },
  }
</script>

<style lang="scss">
  .page-screen {
    min-width: 1400px;
    min-height: 950px;
    // aspect-ratio: 1400 / 950;

    .top-header {
      height: 90px;
      background-image: url(../../assets/screen/bg-title@2x.png);
      background-size: 100% 100%;

      &-image {
        width: 500px;
        height: 50px;
        top: 20px;
        left: 50%;
        margin-left: -250px;
        will-change: transform;
        transform-origin: center;
      }

      &-time {
        top: 10px;
        left: 15%;
      }

      &-fullscreen {
        top: 10px;
        left: 20px;;
      }
    }

    .bottom-footer {
      height: 200px;
      will-change: transform;
      transform-origin: bottom;
    }

    .center-building {
      left: 2%;
      right: 2%;
      width: 96%;
      top: 10%;
    }

    .common-card {
      background-image: url(../../assets/screen/panel-bg@2x.png);
      background-size: 100% 100%;
      padding-bottom: 20px;

      &-icon {
        width: 90px;
        height: 80px;
        margin-left: -10px;
      }

      &-title {
        color: #AADDFF;
        font-size: 21px;
        margin-left: -10px;
      }
    }

    .transparent-card {
      background-image: url(../../assets/screen/icon-333.png);
      background-size: 100% 100%;
    }

    .transparent-card-v2 {
      background-image: url(../../assets/screen/box-bg@2x.png);
      background-size: 100% 100%;
    }

    .transparent-card-v3 {
      background-image: url(../../assets/screen/box-bg@2x-1.png);
      background-size: 100% 100%;
    }

    .transparent-card-v4 {
      background-image: url(../../assets/screen/box-bg@2x-2.png);
      background-size: 100% 100%;
    }
  }
</style>
